<template>
	<view>
		<navbar title="我的消息" :back="true" style="font-size: 30rpx;" />
		<view class="">
			<view v-for="(item,index) in list" :key="index" class="u-flex u-row-left  p-20 u-border-bottom" @tap="goList(item.id)">
				<view style="width: 150rpx;height: 150rpx;">
					<u-image :src="item.image" width="150rpx" height="150rpx" />
				</view>
				<view style="height: 150rpx;"><u-badge  :value="item.count" ></u-badge></view>
				<view style="margin-left: 20rpx;" >
					<view>{{item.title}}</view>								
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import navbar from '@/components/baseNavbar.vue'
	import {
		getInfoCategoryList
	} from '@/api/userInfoCategory.js'
	export default {
		components: {
			navbar
		},
		data() {
			return {

				page: {
					page: 1,
					limit: 20,
				},
				list: [],
				loading: false,
				loadend: false,
			}
		},
		methods: {
			goList(id){
				uni.navigateTo({
					url:"/pages/sub/user/infoList?cateId="+id
				})
			},
			getList() {
				this.loading = true
				getInfoCategoryList(this.page).then(res => {
					this.page.page++
					this.list = this.list.concat(res.data.list)
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true
				}).catch(err => {
					this.loading = false
					this.loadend = true
				})
			},


		},
		onLoad(option) {
			this.getList()
		},
		onReachBottom() {
			if (!this.loadend && !this.loading)
				this.getList()
		}
	}
</script>

<style scoped lang="scss">
</style>
